<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <caption>商品列表</caption>
        <tr>
            <th>商品名</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </table>
    <script>
        //定义一个空的Person对象
        function Person() {}
        //实例化一个Person对象
        let p1 = new Person();
        //动态添加属性
        p1.name = "小吴";
        p1.age = 22;
        //动态添加方法
        p1.run = function () {
            console.log("我叫"+this.name+",今年"+this.age);
        }
        //调用方法
        p1.run();

        //直接实例化对象
        let p2 = {};
        p2.name = "小李";
        p2.age = 25;
        p2.run = function () {
            console.log("小李棒棒哒!");
        }
        p2.run();

        //实例化自带属性和方法的对象
        let p3 = {
            name : "小刘",
            age : 28,
            run : function () {
                alert(this.name+" : "+this.age);
            }
        }
        p3.run();

        //通过自定义对象封装数据
        let arr = [{name:"华为P50",price:"5000",count:1000},
                   {name:"华为Mate40Pro",price:"6799",count:500},
                   {name:"华为Mate40",price:"4999",count:500},
                   {name:"华为MatePad pro",price:"4999",count:1000}]

        //将数组中商品信息展示在页面中
        for (let item of arr) {
            let tr = document.createElement("tr");
            let nameTd = document.createElement("td");
            let priceTd = document.createElement("td");
            let countTd = document.createElement("td");
            nameTd.innerText = item.name;
            priceTd.innerText = item.price;
            countTd.innerText = item.count;
            tr.append(nameTd,priceTd,countTd);
            let table = document.querySelector("table");
            table.append(tr);
        }
    </script>
</body>
</html>